<template>
  <div class="Login">
    <div class="title">
      智慧水电智能运维系统
    </div>
    <div class="ve_container">
      <!-- <el-card :body-style="{ background: 'rgb(32,78,111)' }"> -->
      <span class="headSpan">用户登录</span>
      <transition name="el-fade-in-linear">
        <el-form
          :model="form"
          :rules="rules"
          class="ve_form"
          ref="ref_form"
          :inline="false"
          @keyup.enter="onSubmit"
        >
          <el-form-item prop="userName">
            <el-input
              class="Input"
              v-model.trim="userName"
              placeholder="用户名"
            >
            </el-input>
            <img class="Img" src="../assets/image/login/user.png" />
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input
              class="Input"
              type="password"
              v-model.trim="pwd"
              placeholder="密码"
            >
            </el-input>
            <img class="Img" src="../assets/image/login/password.png" />
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              style="width: 78%"
              v-model.trim="code"
              placeholder="请输入验证码"
            >
            </el-input>
            <img
              style="width: 20%; margin-left: 2%"
              src="../assets/image/login/yanzhengma.png"
            />
          </el-form-item>
          <el-form-item>
            <el-button class="ve_submit" type="primary" @click="onSubmit">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </transition>
      <!-- </el-card> -->
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
// // import { useStore } from "vuex";
import { useRouter } from "vue-router";
// import Login from "@/Function/login/Login";

const router = useRouter();
const form = reactive({
  userName: "1620786619@qq.com",
  pwd: "2013001637",
  code: "",
});
const rules = {
  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  pwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
};
const { userName, pwd, code } = toRefs(form);
const ref_form = ref(null);
const success = ref(false);

const onSubmit = () => {
  ref_form.value.validate(async (valid) => {
    if (valid) {
      router.push({ name: "BillApplyRecord" });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
.Login {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/image/login/loginbgn.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.title {
  width: 46vw;
  height: 20vh;
  background: rgb(2,0,0);
  position: absolute;
  margin-left: 27vw;
  margin-top: 5vh;
  color: #ffffff;
  text-align: center;
  line-height: 20vh;
  font-size: 3vw;
  font-weight: 600;
  letter-spacing: 1vw;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
:deep(.el-input__wrapper) {
  height: 4.4vh;
  font-size: 1vw;
  background: rgb(38, 84, 116) !important;
}
:deep(.el-form-item) {
  margin-bottom: 4vh !important;
}
:deep(.el-input__inner) {
  color: #ffffff;
}
.Input {
  :deep(.el-input__inner) {
    padding-left: 3.6vh;
  }
}
.headSpan {
  color: rgb(255, 255, 255);
  font-size: 3vh;
  position: absolute;
  margin-top: -7.5vh;
  margin-left: -15%;
  letter-spacing: 0.1vw;
}
.Img {
  width: 1.5vw;
  position: absolute;
  margin-left: 0.4vw;
}
.ve_container {
  position: absolute;
  z-index: 1;
  width: 27%;
  top:38%;
  left: 37%;
  // transform: translateY(-50%);
  // transition: all 1s;
  // min-height: 27.3vh;
  text-align: center;
  // background: red;
  h1 {
    font-size: 1.2vw;
    transition: all 1s;
    font-weight: bold;
    margin-bottom: 3.6vh;
  }
  .ve_form {
    .ve_submit {
      width: 100%;
      height: 5vh;
      font-size: 1.2vw;
    }
    :deep(.el-input-group__prepend) {
      padding: 0 0.5vw;
    }
  }
}
</style>
